/*
 * @Author: yuelei
 * @Date: 2018-03-27 14:02:26
 * @Last Modified by: Yuelei

 * @Last Modified time: 2018-04-12 15:34:17


 */

//登录组件

import React from 'react'
import './index.scss'
import { Form, Button, Input, Checkbox, Icon, Radio, FormItem,Modal, message} from 'antd';
import { Route,  Link} from 'react-router-dom'
import { withRouter } from 'react-router'
import { FormComponentProps } from 'antd/lib/form';
import PropTypes from "prop-types";
import LogoIcon from '../../images/logo3.png'

import QueueAnim from 'rc-queue-anim';

import 'antd/dist/antd.css';
import 'antd/dist/antd.js';

const RadioGroup = Radio.Group;
const confirm = Modal.confirm;
class Welcome extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            //value: '',
            iswelcome: true,
            // 对话框
            ModalName: this.props.user,
            ModalTel:this.props.tel,
            ModalSex:this.props.sex,
            visible:false,
            confirmLoading:false,
            show: false
        }
    }
    BackWelcome(e){
this.setState({
    show:false,
    iswelcome:true
})
    }
    // 用户名改变
    user_change(e){
       
        const { handle_name_change }=this.props
        handle_name_change(e.target.value);
       
    }
    tel_change(e){
        const{ handle_tel_change }=this.props
        handle_tel_change(e.target.value);
        
    }
    sex_change(e){
      
        console.log(e.target.value)
        const{ handle_sex_change }=this.props
        handle_sex_change(e.target.value);
       
    }
    welcomeChange(e) {
        this.setState({
            show: !this.state.show,
            iswelcome: !this.state.iswelcome
        });
       
    }
    //    警告框
    showModal(e){
        console.log(this.props.user)
        console.log(this.props.tel)
        console.log(this.props.sex)
        this.setState({
            ModalName:this.props.user,
            ModalTel:this.props.tel,
            ModalSex:this.props.sex,
            visible:true
        })
    }
    handleOk(e){
        this.setState({
            confirmLoading:true
        });
        setTimeout(()=>{
            this.setState({
                visible:false,
                confirmLoading:false
            });

        },1000);
        const { history } = this.props;

        setTimeout(()=>{
            history.push(`/classes/brands`);
        },1000)
       

      

       
    }
    handleCancel(e){
        this.setState({
            visible:false
        })
    }
    render() {

        const { visible, confirmLoading,ModalName,ModalTel,ModalSex}= this.state
        const {user, tel, sex }= this.props
     
        return (
            <div className='welcome'>
            <Modal title="提示"
                   visible={visible}
                 
                   bodyStyle={{}}
                   onOk={(e)=>this.handleOk()}
                   confirmLoading={confirmLoading}
                   onCancel={(e)=>this.handleCancel()} >
                   <h2 style={{textAlign:'center'}}>请确认信息</h2>
                       <div> 
                           <span style={{fontSize:'20px'}}>姓名：{ModalName}</span>
                           <span style={{fontSize:'22px',fontWeight:'bold',marginLeft:'2px'}}>{ModalSex=='male'? '先生' : '女士' }</span>
                           
                       </div>
                       <div> 
                           <span style={{fontSize:'20px'}}>电话： {ModalTel}</span>
                       </div>
                     
            </Modal>
                <div className='title' >
                <img src={LogoIcon} alt="" onClick={(e)=>this.BackWelcome(e)} / >
                    {/* <h3>欢迎</h3>
                    <h3>波涛建材选购</h3> */}
                </div>
                <div className="queue-demo">
                    <div>
                        {this.state.iswelcome
                            ? <button
                                    onClick={(e) => {
                                    this.welcomeChange(e)
                                }}
                                    className='welcome-first'>欢迎选材</button>
                            : null
}
                    </div>
                 
                        {this.state.show
                            ?
                            <QueueAnim
                            className="demo-content"
                            key="demo"
                            type={['bottom', 'top']}
                            ease={['easeOutQuart', 'easeInOutQuart']}> <div className="demo-tbody" key="b">
                                    <Form>
                                        <Input
                                            className='welcomeInput'
                                            placeholder="请输入你的真实姓名"
                                            prefix={< Icon type = "user" 
                                            style = {{ color: 'rgba(0,0,0,.25)',background:'#F3F4F7' }}/>}
                                            onChange={(e)=>this.user_change(e)}/>
                                        <Input
                                            className='welcomeInput'
                                            placeholder="请输入你的电话号码"
                                            prefix={< Icon type = "mobile" 
                                            style = {{ color: 'rgba(0,0,0,.25)',background:'#F3F4F7'}}/>}
                                            onChange={(e)=>this.tel_change(e)}
                                            />
                                    </Form>
                                    <RadioGroup
                                        className='welcome-group'
                                        onChange={(e) => this.sex_change(e)}
                                        value={sex}>
                                        <span style={{paddingRight:'20px'}}>性别:</span>
                                        <Radio value={'female'} className='welcome-radio'>女士</Radio>
                                        <Radio value={'male'} className='welcome-radio'>先生</Radio>
                                    </RadioGroup>
                                    <button
                                        type='primary'
                                        className='welcome-in'
                                        onClick={(e) => this.showModal(e)}>开始选购</button>
                                </div>
                                </QueueAnim>
                            : null
}
                   
                </div>
            </div>
        );
    }
}


export default withRouter(Welcome);

